<template>
	<view>
		<!-- 我关注的圈子 -->
		<view class="block-title">我关注的圈子</view>
		<topic-list :list="myTopic" loadStatus="none"></topic-list>
		<!-- 热门话题 -->
		<view class="block-title">热门话题</view>
		<!-- 滚动板块 -->
		<scroll-view :scroll-x="true">
			<view class="scroll-view">
				<!-- 热门话题 -->
				<view class="scroll-item">
					<text class="title">热门话题</text>
					<navigator class="dis-item" v-for="(item,index) in hotDisList" hover-class="none" :key="index" :url="'/pages/discuss/discuss?id=' + item.id">
						<view class="dis-title"># {{item.title}}</view>
						<view class="desc">{{item.introduce}}</view>
					</navigator>
				</view>
				<!-- 最新话题 -->
				<view class="scroll-item">
					<text class="title">最新话题</text>
					<navigator class="dis-item" v-for="(item,index) in newDisList" hover-class="none" :key="index" :url="'/pages/discuss/discuss?id=' + item.id">
						<view class="dis-title"># {{item.title}}</view>
						<view class="desc">{{item.introduce}}</view>
					</navigator>
				</view>
			</view>
		</scroll-view>
		<!-- 圈子列表 -->
		<u-tabs name="tab_name" :list="topicCate" active-color="#dd524d" :is-scroll="false" c :current="current" @change="tabChange"></u-tabs>
		<list :list="topicList" loadStatus="none"></list>
		<navigator url="/pages/topic-list/topic-list" style="text-align: center;color: #007AFF;margin: 20rpx 0;">+关注更多圈子</navigator>
	</view>
</template>

<script>
	import list from '../../components/topic-list/topic-list.vue';
	export default {
		components: {
			list
		},
		data() {
			return {
				myTopic: [],
				hotDisList: [],
				newDisList: [],
				current: 0,
				topicCate: [],
				topicCateId: 0,
				topicList: [],
			};
		},
		onLoad() {
			this.getMyTopic();
			this.gteHotDiscuss();
			this.gteNewDiscuss();
			this.getTopicCate();
			this.getTopicList();
		},
		methods: {
			tabChange(index) {
				this.current = index;
				this.topicList = [];
				this.loadStatus = "loading";
				this.topicCateId = this.topicCate[index].id
				this.getTopicList();
			},
			getTopicCate() {
				this.$H.post("/api/topic/cateList")
					.then(res => {
						this.topicCate = res[1].data;
					})
			},
			getTopicList() {
				this.$H.post('/api/topic/cateTopic', {
					id: this.topicCateId
				}).then(res => {
					this.topicList = this.topicList.concat(res[1].data.data);
					if (res[1].data.current_page === res[1].data.last_page || res[1].data.last_page === 0) {
						this.loadStatus = "nomore";
					} else {
						this.loadStatus = "loadmore"
					}
				})
			},
			//我关注的圈子
			getMyTopic() {
				this.$H.post('/api/topic/myTopic', {
					sessionKey: uni.getStorageSync("sessionKey")
				}).then(res => {
					this.myTopic = res[1].data.data;
				});
			},
			// 热门话题
			gteHotDiscuss() {
				this.$H.post('/api/discuss/list', {
					active: "hot",
					paginate: 3
				}).then(res => {
					this.hotDisList = res[1].data.data;
				});
			},
			// 最新话题
			gteNewDiscuss() {
				this.$H.post('/api/discuss/list', {
					active: "new",
					paginate: 3
				}).then(res => {
					this.newDisList = res[1].data.data;
				});
			}
		}
	}
</script>

<style lang="scss">
	@import 'more.css';
</style>
